<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="box">
        <button class="btn ">开始答题</button>
        <div class="dati active ">
            <h2 class="timu"></h2>
            <div class="answer main">
                <div class="optionItem" data-index="0">
                   
                </div>
                <div class="optionItem" data-index="1">
                </div>
                <div class="optionItem " data-index="2">
                </div>
                <div class="optionItem " data-index="3">
                </div>
            </div>
            <div id="score">
                加油！你已答对0道题
            </div>
        </div>
        <div class="end active">
            <span class="endTxt">你已连续答对0道题，继续努力</span>
            
            <button class="btn endBtn">重新开始</button>
        </div>
    </div>

    <script src="./js/ajax.js"></script>
    <script>
        var btn = document.querySelector(".btn")
        var dati = document.querySelector(".dati")
        var timu = document.querySelector(".timu")
        var main = document.querySelector(".main")
        var score = document.querySelector("#score")
        var end = document.querySelector(".end")
        var endTxt = document.querySelector(".endTxt")
        var endBtn = document.querySelector(".endBtn")
        var currentTimu = null
        //记录答题数量
        var score = 0;
        endBtn.onclick = function () {
            endBtn.className = "endBtn active"
            dati.className = "dati"
            end.className = "end active"
            console.log(12333)
            ajax()
        }
        btn.onclick = function () {
            btn.className = "btn active"
            dati.className = "dati"
            end.className = "end active"
            ajax()
        }  
        
        main.addEventListener("click", function(e) {
            var index = e.target.dataset.index;
            if(currentTimu.answer == index){
                var num = ++score
                // score.innerHTML = `你已答对${num}道`
                document.querySelector('#score').innerHTML = `你已答对${num}道`;
                console.log(score)
                console.log(score.innerHTML)
                timu.innerHTML = ``
                main.innerHTML = ``
                ajax()
            }else{
                endBtn.className = "btn endBtn"
                dati.className = "dati active"
                end.className = "end"
                endTxt.innerHTML =`<span >你已连续答对${score}道题，继续努力</span>
                                 `
                score = 0;
                document.querySelector('#score').innerHTML = `你已答对0道`;
            }
            
        });
        
    </script>
</body>

</html>